<template>
    <div class="introdution">
        <no-ssr>
            <bread :breadList=breadList></bread>
        </no-ssr>
        <div class="introdution-main">
            <div style="float: left;position: relative;">
                <div class="main-nav">
                    <nav-list :list=selfNavList @tonav="navChenge" ref="nav-list" id='nav-flag'></nav-list>
                </div>
            </div>        
            <div class="introdution-main-body main-body-flag">
                <pro-service :descript="descript" title="项目服务" selfImg="/img/insert/project-servive.jpg" :serviceitemList=projectService ref="pro-service"></pro-service>
                <pro-type :proItemList=projectType ref="pro-type"></pro-type>
                <service-flow :serviceFlow=serviceFlowData ref="service-flow"></service-flow>
                <team-qual-type :teamItemList=teamData ref="team-qual-type"></team-qual-type>
                <overlay :overlayItemList=overlayData ref="overlay"></overlay>
                <!-- <business-contact title="业务联系人" :businessItemList=contcatData ref="business-contact"></business-contact> -->
            </div>
        </div>
    </div>
</template>

<script>
import bread from '@/components/breadcrumb'
import navList from '@/components/navList'
import proService from '@/components/publicComponent/proService'
import overlay from '@/components/publicComponent/overlay'
// import businessContact from '~/components/publicComponent/businessContact'
import serviceFlow from '@/components/publicComponent/serviceFlow'
import teamQualType from '@/components/service/teamQualType'
import proType from '@/components/service/proType'
import {serviceProjectType, serviceTeam, serviceOverlay, serviceContcat, authorities, profile} from '@/api/getData'

export default {
  data() {
    return{
        serviceFlowData: {
            title: '服务流程',
            img: '/img/flow/service_flow.png'
        },
        breadList: [
            {
            text: '项目服务',
            name: 'introdution'
            },
            {
            text: '业务介绍',
            name: 'introdution'
            }
        ],
        selfNavList: [
            {
                text: '项目服务',
                ref: 'pro-service'
            },
            {
                text: '承接项目类型',
                ref: 'pro-type'
            },
            {
                text: '服务流程',
                ref: 'service-flow'
            },
            {
                text: '团队资质',
                ref: 'team-qual-type'
            },
            {
                text: '覆盖厂商',
                ref: 'overlay'
            }
        ],
        //项目服务数据
        projectService: [],
        //项目类型数据
        projectType: [],
        //团队资质数据
        teamData: [],
        //覆盖厂商
        overlayData: [],
        // 联系人
        contcatData: [],
        descript: ''
    }
  },
  computed: {
     
  },
  props: {
   
  },
  components: {
    bread,
    navList,
    proService,
    proType,
    teamQualType,
    overlay,
    // businessContact,
    serviceFlow
  },

  created() {
      

  },
  async mounted() {
    //项目类型
    await serviceProjectType.call(this,1).then(res=>{
        this.projectType = res;
    //   console.log(res)
    })
    //团队资质
    await serviceTeam.call(this).then(res=>{
        this.teamData = res;
    })
    //覆盖厂商
    await serviceOverlay.call(this,1).then(res=>{
        this.overlayData = res;
    })
    // 联系人
    //   serviceContcat.call(this, 1).then(res=>{
    //       this.contcatData = res;
    //   })
    await authorities.call(this, 1).then(res=>{
        this.projectService = res;
    })
    await profile.call(this, 1).then(res=>{
        this.descript = res[0].descript;
    })
    this.$refs['nav-list'].addNavEvent()
  },
  methods: {
    navChenge(key){
        document.body.scrollTop = this.$refs[key].$el.offsetTop +230;
        document.documentElement.scrollTop = this.$refs[key].$el.offsetTop +230;
    }
  }
}
</script>

<style lang="stylus" scoped>
.introdution{
    width: 1200px;
    padding-top: 20px;
    margin: 0 auto; 
    border-bottom: 1px solid transparent;
}
.introdution-main{
   position: relative;
    .introdution-main-body{
        margin-left: 246px;
    }    
}
</style>
